<h2>Tutorial 6: Build a 3D Simulation with a Continuous 2D field</h2>

<p>In this tutorial we will build a simple model of the Solar System using a Continuous2D, but will display the model using 3D displays and portrayals.

<p>This tutorial teaches:
<ul>
<li> How to create a Display3D
<li> How to attach a ContinuousPortrayal3D
<li> How to use a simple SpherePortrayal3D
<li> How to wrap 3D objects with images
<li> How to use a TransformedPortrayal3D
</ul>

<h2>Write the Body class</h2>

<p>The Body class will represent the Sun and various planets in our model.  All a body needs is a distance from the sun and a velocity.  Create the <tt>tutorial6</tt> directory, and in it place the following file, called <tt>Body.java</tt>:

<pre><tt>
package sim.app.tutorial6;
import sim.engine.*;
import sim.util.*;

public class Body implements Steppable
    {
    public double velocity; 
    public double distanceFromSun; 
    
    public double getVelocity() { return velocity; }
    public double getDistanceFromSun() { return distanceFromSun; } 
        
    public Body(double vel, double d) { velocity = vel;  distanceFromSun = d; }
</pre></tt>

Now we need to implement Body's steppable.  Basically, each time a body is stepped, it will orbit further around the sun.  Ordinarily we'd do that by getting the current location and adjusting it.  But for a periodic orbit it's easily enough done by just getting the current timestep and computing the location based on that.  Add:

<pre><tt>
    public void step(SimState state)
        {
        Tutorial6 tut = (Tutorial6) state;
        if (distanceFromSun > 0)  <font color=gray>// the sun's at 0, and you can't divide by 0</font>
            {
            double theta = ((velocity / distanceFromSun) * state.schedule.getSteps())%(2*Math.PI) ;  
            tut.bodies.setObjectLocation(this, 
                new Double2D(distanceFromSun*Math.cos(theta), distanceFromSun*Math.sin(theta)));
            }
        }
    }    
</tt></pre>

<p>Looking good.

<h2>Write the Model</h2>

<p>Now we'll add the model class (Tutorial6).  The model basically creates the ten bodies, then schedules them.  Not much else.  Create a file called <tt>Tutorial6.java</tt>, and add to it:

<pre><tt>
package sim.app.tutorial6;
import sim.engine.*;
import sim.field.continuous.*;
import sim.util.*;
import ec.util.*;

public class Tutorial6 extends SimState
    {
    static final int PLUTO = 9;  <font color=gray>// Furthest-out body</font>
    public Continuous2D bodies;

    public Tutorial6(long seed)
        {
        super(seed);
        bodies = new Continuous2D(DISTANCE[PLUTO],DISTANCE[PLUTO],DISTANCE[PLUTO]);
        }

    <font color=gray>// distance from sun in 10^5 km</font>
    public static final double[] DISTANCE = new double[]
        {0, 579, 1082, 1496, 2279, 7786, 14335, 28725, 44951, 58700}; 

    <font color=gray>// diameters in 10 km</font>
    public static final double[] DIAMETER = new double[] 
        {139200.0, 487.9, 1210.4, 1275.6, 679.4, 14298.4, 12053.6, 5111.8, 4952.8, 239.0};
 
    <font color=gray>// period in days</font>
    public static final double[] PERIOD = new double[] 
        {1 <font color=gray>/* don't care :-) */</font>, 88.0, 224.7, 365.2, 687.0, 4331, 10747, 30589, 59800, 90588 };
</tt></pre>

<p><table width="35%" align=right valign=top bgcolor="#DDDDDD"><tr><td><font size="1">
<b>Why not use a Continuous3D?</b>
<p>Well, all the planets are in the same plane, so there's really no need.  But sure, we could have used a Continuous3D also.  We figured since you already are familiar with a Continuous2D....
<p><b>Pluto's not in the same plane!</b>
<p>Um, yeah, well, this is a tutorial, remember!
</font></td></tr></table>
We're storing the sun and planets in a Continuous2D.  Since we don't care about neighborhood information, the discretization is the size of the entire field (out to Pluto).  Now we'll load the bodies and schedule them:

<pre><tt>
    public void start()
        {
        super.start();
        
        bodies = new Continuous2D(DISTANCE[PLUTO],DISTANCE[PLUTO],DISTANCE[PLUTO]);
        
        <font color=gray>// make the bodies  -- stick them out the x axis, sweeping towards the y axis.</font>
	for(int i=0; i&lt;10;i++)
            {
            Body b = new Body((2*Math.PI*DISTANCE[i]) / PERIOD[i], DISTANCE[i]);
	   		bodies.setObjectLocation(b, new Double2D(DISTANCE[i],0)); 
            schedule.scheduleRepeating(b);
            }
        }
</tt></pre>

<p>We finish with your usual boilerplate main(...), in case you want to run headless:

<pre><tt>
    public static void main(String[] args)
        {
        doLoop(Tutorial6.class, args);
        System.exit(0);
        }
    
    }
</tt></pre>

<h2>Write the 3D Display Code</h2>

<p>Now we're ready to code the 3D display code.  The engine underneath the code is <a href="http://java.sun.com/products/java-media/3D/"><i><b>Java3D</b></i></a>, which does not come with the standard Java distribution: you will need to download and install the Java3D SDK for your system to compile MASON's 3D libraries.

<p>Java3D is a sophisticated 3D Scenegraph library, and while you have considerable access to the Java3D underpinnings if you need them, we've done our best to shield you from it.  In fact, for most purposes will need no Java3D function calls at all.  The 3D code should look very similar to previous 2D code.

<p>Create a file called <tt>Tutorial6WithUI.java</tt>.  In this file, add the following:

<pre><tt>
package sim.app.tutorial6;
import sim.portrayal3d.continuous.*;
import sim.portrayal3d.simple.*;
import sim.engine.*;
import sim.display.*;
import sim.display3d.*;
import javax.swing.*;
import java.awt.*;
import sim.util.*;

public class Tutorial6WithUI extends GUIState
    {
    public Display3D display;
    public JFrame displayFrame;
    
    ContinuousPortrayal3D bodyPortrayal = new ContinuousPortrayal3D();
</tt></pre>

<p><table width="35%" align=right valign=top bgcolor="#DDDDDD"><tr><td><font size="1">
<b>Why ContinuousPortrayal3D?  Aren't we using a Continuous2D?</b>
<p>Many 3D portrayals can display either 3D and 2D fields.
</font></td></tr></table>
The displayer for 3D is <tt>Display3D</tt>, just as the displayer for 2D is <tt>Display2D</tt>.  These classes have very similar APIs, but Display3D has a few additional gizmos we'll talk about later.  Now add the following code, which should look very familiar by now:

<pre><tt>
    public static void main(String[] args)
        {
        new Tutorial6WithUI().createController();
        }

    public Tutorial6WithUI() { super(new Tutorial6( System.currentTimeMillis())); }
    public Tutorial6WithUI(SimState state) { super(state); }
    public static String getName() { return "Tutorial 6: Planets"; }
    public static Object getInfo() { return "&lt;H2>Tutorial 6&lt;/H2> Planetary Orbits"; }

    public void start()
        {
        super.start();
        setupPortrayals();
        }

    public void load(SimState state)
        {
        super.load(state);
        setupPortrayals();
        }

    public void quit()
        {
        super.quit();
        if (displayFrame!=null) displayFrame.dispose();
        displayFrame = null;
        display = null;
        }
</tt></pre>

<p>Next we need to define our personal setupPortrayals() method.  This is where we'll put most of the relevant 3D code.    The first thing we'll do in this code is tell our Display3D to remove any existing scene it had constructed (if any).

<pre><tt>
    public void setupPortrayals()
        {
        display.destroySceneGraph();
</tt></pre>

<p>Next we add portrayals for our planets.  This needs to be done after destroying the scene graph because it could potentially try to modify Java3D objects which Java3D has (too cleverly) shared with existing objects in its scene graph and which are not allowed to be modified.  Destroying the scene graph prevents this possibility.

<pre><tt>
        Tutorial6 tut = (Tutorial6) state;
        bodyPortrayal.setField(tut.bodies);
        
        <font color=gray>// planetary colors</font>
        Color colors[] = {Color.yellow, Color.white, Color.green, 
                Color.blue, Color.red, Color.orange, 
                Color.magenta, Color.cyan, Color.pink, Color.white};
        
        Bag objs = tut.bodies.getAllObjects();
        for(int i=0;i&lt;10;i++)
            bodyPortrayal.setPortrayalForObject(
                objs.objs[i], new SpherePortrayal3D(colors[i], 
                        (float) (Math.log(Tutorial6.DIAMETER[i])*50),
                    50));
</tt></pre>

<p><table width="35%" align=right valign=top bgcolor="#DDDDDD"><tr><td><font size="1">
<b>Wait a minute.  Math.log?</b>
<p>Astronomical differences are huge.  We need to scale them down in a nonlinear fashion.  The size of the planets will be the log of their true size, times fifty.  That makes them more easily visible.  And yes, it also makes the Earth nearly as big as the Sun.  :-)
</font></td></tr></table>
We're loading the planets into the ContinuousPortrayal3D.  To do so, we associate each planet with a unique <b>SpherePortrayal3D</b> (so we can have each one drawn with a different color and size sphere).  

<p>SpherePortrayal3D draws objects as, you guessed it, spheres.  There are lots of other portrayal options: cones, cubes, cylinders, arbitrary 3D shapes, images and text.  Most portrayals by default are drawn as flat colored objects of varying transparency, not needing external light, or they can be wrapped with an image.

<p><table width="35%" align=right valign=top bgcolor="#DDDDDD"><tr><td><font size="1">
<b>How about shading and reflection?</b>
<p>You can set the Java3D Appearance object for your portrayals, to add any Java3D gizmos you need.  You can also provide lights as portrayals.
</font></td></tr></table>
The 50 means that each sphere will have 50 <i>divisions</i>.  More divisions means that the sphere more closely resembles a true sphere (it is drawn with more): but they take longer to draw.  The default for Java3D spheres is 15, which draws quickly but looks fairly crummy.  50 is a lot, but we want pretty spheres and we only have ten objects, so we can afford it.

<p>We conclude setupPortrayals() by telling the Display3D to reset() itself, as usual, and to set itself up.  In Display2D this was done with a simple repaint().  But Display3D needs to be told, at start() or load() time, to build its Java3D scene graph:

<pre><tt>
        display.reset();
        display.createSceneGraph();
        } 
</tt></pre>

<p>Now let's add the init() method:

<pre><tt>
    public void init(Controller c)
        {
        super.init(c);

        Tutorial6 tut = (Tutorial6) state;
        bodyPortrayal.setField(tut.bodies);

        display = new Display3D(600,600,this,1);
        display.attach(bodyPortrayal, "The Solar System");
		
        <font color=gray>// scale down to fit the region a little beyond pluto into the 2x2x2 box</font>
        display.scale(1.0/(Tutorial6.DISTANCE[Tutorial6.PLUTO]*1.05));
</tt></pre>

<p>Everything but the last line should be clear.  But we have a problem: if our model is as big as the solar system, we need to fit it into the viewable region of our Display3D.  Ordinarily the Display3D is set up so that fitting into the window is a 2 by 2 by 2 box centered at the origin, and the eye is on the negative Z axis and is looking down the positive Z axis.  But right now our model goes clear out to pluto.  We solve this by scaling the entire universe down to fit into the 2 by 2 by 2 box, using the <b>scale()</b> method.  This is an example of a <i>transform</i>: adjusting the universe by translating (moving) it, rotating it, or scaling it.  Our solar system is centered perfectly at the origin (where we put the Sun), and is going around the Z axis, so there's no need to translate or rotate.  We just scale.

<p>The rest of the code is obvious:

<pre><tt>
	displayFrame = display.createFrame();
        c.registerFrame(displayFrame);
        displayFrame.setVisible(true);
        }
    }
</tt></pre>

<h2>Run the Universe!</h2>

<p>Save and compile all files, then run <b>java sim.app.tutorial6.Tutorial6WithUI</b>.   There are two ways to "zoom in" on the solar system to see the planets better.  You can move the "eye" back and forth along the Z axis (dragging the right mouse button).  Or you can magnify by changing the scale text field.  The second is a better choice.  The reason for this is that the scaled-down planets are very small objects.  By the time you "zoom in" close enough to see them, they literally pass "behind" the eye and disappear from view!

<h2>Add Images</h2>

But wait, there's more!  In the tutorial6 directory there are several JPEG images which hold spherical sun and planet "textures" (3D-speak for images wrapped around a shape).  Let's wrap them around our planets.  We need to modify the Tutorial6WithUI.java file.  First we add a simple function for loading images:
<pre><tt>
    <font color=gray>/** Gets an image relative to the tutorial6 directory */</font>
    public static Image loadImage(String filename)
        { 
        return new ImageIcon(Tutorial6.class.getResource(filename)).getImage(); 
        }
</tt></pre>

<p>Now let's set up the SpherePortrayal3D to use images rather than colors. 

<p><table border=1>
<tr><td align=center><b>FROM...</b></td></tr>
<tr><td><pre><tt>
        <font color=gray>// planetary colors</font>
        Color colors[] = {Color.yellow, Color.white, Color.green, 
                Color.blue, Color.red, Color.orange, 
                Color.magenta, Color.cyan, Color.pink, Color.white};
        
        Bag objs = tut.bodies.getAllObjects();
        for(int i=0;i&lt;10;i++)
            bodyPortrayal.setPortrayalForObject(
                objs.objs[i], new SpherePortrayal3D(colors[i], 
                        (float) (Math.log(Tutorial6.DIAMETER[i])*50),
                    50));
</tt></pre></td></tr><tr><td align=center><b>CHANGE TO</b></td></tr><tr><td><pre><tt>
<font color="blue">
        <font color=gray>// planetary images</font>
        String imageNames[] = {"sunmap.jpg","mercurymap.jpg","venusmap.jpg",
                "earthmap.jpg","marsmap.jpg","jupitermap.jpg",
                "saturnmap.jpg","uranusmap.jpg","neptunemap.jpg","plutomap.jpg"};
</font>
        for(int i=0;i&lt;10;i++)
            {
            bodyPortrayal.setPortrayalForObject(
                objs.objs[i], new SpherePortrayal3D(<font color="blue">loadImage(imageNames[i]), </font>
                        (float) (Math.log(Tutorial6.DIAMETER[i])*50),
                    50));
            }
</tt></pre></td></tr></table>

<p><table width="35%" align=right valign=top bgcolor="#DDDDDD"><tr><td><font size="1">
<b>Some of the images look thresholded and crummy.</b>
<p>Yeah. Java3D converts the textures using what appears to be non-dithered thresholds to 256 colors.  We don't know if this is a Java3D bug or if it's life with 3D graphics cards.  :-(
</font></td></tr></table>
<p>Now that we've wrapped our planets with images, compile and run the code again.  Notice that after you press play, there's a significant (several second) pause.  Here Java3D is setting up the images on the planets.  We're sorry about the wait.

<p>If you look closely at Earth you may discern another problem: it's tilted sideways (the north pole starts pointing along the orbital circle!).  This is because Java3D wraps images around Spheres by wrapping around the Y Axis.  We need to rotate the sphere so that its "Y Axis" actually points up at us -- essentially moving the Y Axis to the location where the Z Axis was.  Specifically, we want to rotate the sphere 90 degrees in the X direction.

<p><table width="35%" align=right valign=top bgcolor="#DDDDDD"><tr><td><font size="1">
<b>Why use degrees?  Why not radians?</b>
<p>Java3D of course uses radians underneath.  But we thought degrees would be easier for inexperienced model builders to work with.  We may live to regret that decision!
</font></td></tr></table>
We can perform a transform (like a rotation) on SimplePortrayal3Ds -- of which SpherePortrayal3D is one -- by wrapping them in <i>another</i> SimplePortrayal3D called a <b>TransformedPortrayal3D</b>.  This outer portrayal has facilities for transformations to perform on its underlying SimplePortrayal3D, much like the Display3D has facilities for transformations on the entire environment.  Change the code as follows:

<p><table border=1>
<tr><td align=center><b>FROM...</b></td></tr>
<tr><td><pre><tt>
            bodyPortrayal.setPortrayalForObject(
                objs.objs[i], new SpherePortrayal3D(loadImage(imageNames[i]),
                        (float) (Math.log(Tutorial6.DIAMETER[i])*50),
                    50));
</tt></pre></td></tr><tr><td align=center><b>CHANGE TO</b></td></tr><tr><td><pre><tt>
<font color="blue">
            TransformedPortrayal3D trans =
                new TransformedPortrayal3D(</font>new SpherePortrayal3D(loadImage(imageNames[i]),
                        (float) (Math.log(Tutorial6.DIAMETER[i])*50),
                    50));
<font color="blue">                       
            trans.rotateX(90.0); <font color=gray>// move pole from Y axis up to Z axis</font>
            bodyPortrayal.setPortrayalForObject(objs.objs[i], trans);
</tt></pre></td></tr></table>

<p>Recompile and run the code, and now the planets are drawn correctly.

<br>
<br>
<br>
<br>



